<template>
  <div class="">
    <van-search
      class="search_"
      shape="round"
      v-model="value"
      placeholder="请输入搜索关键词"
      @input="inpFn"
    />
    <!-- 搜索下容器 -->
    <div
      class="search_wrap"
      v-if="this.resultlist.length ===0"
    >
      <!-- 标题 -->
      <p class="hot_title">热门搜索</p>
      <!-- 热搜关键词容器 -->
      <div class="hot_name_wrap">
        <!-- 每个搜索关键词 -->
        <span
          class="hot_item"
          v-for="(obj, index) in hotArr"
          :key="index"
          @click="fn(obj.first)"
        >{{ obj.first }}</span>

      </div>

    </div>
    <div
      class="search_wrap"
      v-else
    >
      <!-- 标题 -->
      <p class="hot_title">最佳匹配</p>
      <van-list
        v-model="loading"
        :finished='finished'
        finished-text="没有更多了"
        @load="onload"
      >
        <!-- <van-cell
          center
          :title='item.name'
          v-for="(item,index) in resultlist"
          :key="index"
          :label="item.ar[0].name +'--'+ item.name"
        >
          <template #right-icon>
            <van-icon
              name="play-circle-o"
              size="0.6rem"
            />
          </template>
        </van-cell> -->
        <songitem
          v-for="obj in resultlist"
          :key="obj.id"
          :title="obj.name"
          :author="obj.ar[0].name"
          :id="obj.id"
        ></songitem>
      </van-list>
    </div>
  </div>
</template>

<script>
import { hotSearchAPI, searchResultAPI } from '@/api';
import songitem from '@/component/songitem';
export default {
  // 组件名称
  name: '',
  // 局部注册的组件
  components: {
    songitem
  },
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data () {
    return {
      hotArr: [], // 热搜关键字
      value: '',
      resultlist: [],
      loading: false,
      finished: false,
      page: 1
    }
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
  * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
  */
  async created () {
    const res = await hotSearchAPI();
    console.log(res);
    this.hotArr = res.data.result.hots;



  },
  /**
  * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
  * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
  */
  mounted () { },
  // 组件方法
  methods: {

    async getsearchlist () {
      return await searchResultAPI({
        keywords: this.value,
        limit: 20,
        offset: (this.page - 1) * 20
      })
    },
    async fn (val) {
      this.page = 1; // 点击重新获取第一页数据
      this.finished = false;
      // 点击热搜关键词
      this.value = val; // 选中的关键词显示到搜索框
      const res2 = await this.getsearchlist()
      console.log(res2);
      this.resultlist = res2.data.result.songs
      this.loading = false; //本次数据加载完毕-才能让list加载更多
    },
    async inpFn () {
      if (this.timer) clearTimeout(this.timer);
      this.timer = setTimeout(async () => {
        this.page = 1; // 点击重新获取第一页数据
        this.finished = false
        if (this.value.length === 0) {
          this.resultlist = []
          return
        }
        const res3 = await this.getsearchlist()
        // console.log(res3);
        if (res3.data.result.songs === undefined) {
          this.resultlist = []
          return
        }

        this.resultlist = res3.data.result.songs
        this.loading = false;
      }, 900)

    },
    async onload () {
      this.page++
      const res4 = await this.getsearchlist()
      // console.log(res4);
      if (res4.data.result.songs === undefined) {
        this.finished = true
        this.loading = false
        return
      }


      this.resultlist = [...this.resultlist, ...res4.data.result.songs]
      this.loading = false
    },
  }
}
</script>

<style scoped>
.search_ {
  margin-top: 1.5rem;
  /* margin-bottom: 1.5rem; */
}

/* 搜索容器的样式 */
.search_wrap {
  padding: 0.266667rem;
  margin-bottom: 1.5rem;
}

/*热门搜索文字标题样式 */
.hot_title {
  font-size: 0.32rem;
  color: #666;
}

/* 热搜词_容器 */
.hot_name_wrap {
  margin: 0.266667rem 0;
}

/* 热搜词_样式 */
.hot_item {
  display: inline-block;
  height: 0.853333rem;
  margin-right: 0.213333rem;
  margin-bottom: 0.213333rem;
  padding: 0 0.373333rem;
  font-size: 0.373333rem;
  line-height: 0.853333rem;
  color: #333;
  border-color: #d3d4da;
  border-radius: 0.853333rem;
  border: 1px solid #d3d4da;
}
</style>
